<script setup lang="ts">
import { ref, inject } from "vue";
import language from "@/i18n/language";
import { vFocus } from "@/directive/vFocus";
// import { vVisible } from "@/directive/vVisible";

import useCount from "@/composible/useCount";
const lang = inject("language", "zh") as "en" | "zh";
const name = ref("");
const { count: credit, add: addCredit, reduce: reduceCredit } = useCount(60);
</script>
<template>
  <div>
    <label>{{ language[lang].name }}：</label>
    <input type="text" v-model="name" v-focus />
    <!-- <template v-visible="['student']"> -->
    <label>{{ language[lang].credit }}：</label>
    <button @click="reduceCredit">-</button>
    <span>{{ credit }}</span>
    <button @click="addCredit">+</button>
    <!-- </template> -->
  </div>
</template>
<style scoped>
input {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
